<template>
  <div class="app_content_container">
    <Breadcrumb :items="['数据字典']" />
    <LayoutCard title="应用列表" widthL="300px" marginRight="0" style="padding: 0 16px">
      <div class="flex">
        <ga-table-tool
          input-width="210px"
          placeholder="输入名称"
          @handle-search="onSearch"
          @handle-refresh="fetchData"
        />
        <ga-tooltip content="创建">
          <ga-button style="margin: 0 8px" @click="$refs.addOrEditRef.open()">
            <template #icon>
              <icon-plus />
            </template>
          </ga-button>
        </ga-tooltip>
      </div>
      <listCard
        ref="listCardRef"
        :data-list="tableData"
        :loading="loading"
        @handle-edit="(item) => $refs.addOrEditRef.open(item)"
        @handle-delete="(item) => handleDelete(item)"
        @handle-click-item="(val) => (info = val)"
      >
        <template #content="{ item }">
          <p class="tlt">{{ item?.dictType || "-" }}</p>
          <p class="tlt_chinese">{{ item?.dictName || "-" }}</p>
        </template>
      </listCard>
      <template #content>
        <div class="content_area">
          <dictData :info="info" />
          <!-- <BorderBox title="详情信息">
            <template #main_info>
              <ga-row class="grid_demo" :gutter="24">
                <ga-col :span="6">
                  <label>类别</label> {{ info?.category || "-" }}
                </ga-col>
                <ga-col :span="6">
                  <label>标识</label> {{ info?.appname || "-" }}
                </ga-col>
                <ga-col :span="6"> <label>描述</label> {{ info?.remark || "-" }} </ga-col>
              </ga-row>
            </template>
          </BorderBox> -->
        </div>
      </template>
    </LayoutCard>
    <addOrEdit ref="addOrEditRef" @fetchData="fetchData" />
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import { getDictTypeList, deleteDictType } from "@/api/dataDictionary";
import { deleteModalWithRefresh } from "@/hooks/useWarningModal";
import addOrEdit from "./addOrEdit.vue";
import listCard from "./list-card.vue";
import useLoading from "@/hooks/loading";
import dictData from "../data/index.vue";
const tableData = ref([]);
const info = ref({});
const listCardRef = ref();
const { loading, setLoading } = useLoading(true);
const listQuery = reactive({
  limit: -1,
  search: "",
});
// 删除方法
const handleDelete = (record) => {
  deleteModalWithRefresh(
    { ...record, name: record?.dictName, id: record?.dictId },
    deleteDictType,
    () => {
      fetchData();
      listCardRef.value.handleClickItem(record, 0);
    }
  );
};
// 获取type列表
const fetchData = async () => {
  setLoading(true);
  try {
    const { data } = await getDictTypeList(listQuery);
    tableData.value = data.items;
  } finally {
    setLoading(false);
  }
};
// 处理搜索方法
const onSearch = (val) => {
  listQuery.search = val;
  fetchData();
};
onMounted(() => {
  fetchData();
});
</script>

<style lang="scss" scoped>
.tlt {
  line-height: 22px;
  color: #0f5ef7;
}
.tlt_chinese {
  line-height: 22px;
  font-size: 12px;
  color: #2c406899;
}
.grid_demo {
  color: #2c4068;
  label {
    color: #2c406899;
    margin-right: 16px;
  }
}
</style>
